import React, {useRef} from "react";
import {Graph} from "@antv/x6";
import {data} from "@/core/bpm/bpm-data";
import {useMount} from "ahooks";

const BpmReact = () => {
    const container = useRef<HTMLDivElement>(null)
    useMount(() => {
        initBpm()
    })
    const initBpm = () => {
        const initBpmData = {...data}
        const graph: Graph = new Graph({
            container: container.current as HTMLDivElement,
            background: {
                color: "#F2F7FA",
            }
        })
        graph.fromJSON(initBpmData) // 渲染元素
        graph.centerContent() // 居中显示
    }

    return (
        <div>
            <div ref={container} style={{width: '90%', height: '780px'}}></div>
        </div>
    )
}
export default BpmReact;